<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input v-model="searchInfo.keyword" placeholder="昵称/真实姓名" style="width:122px;" />
        <el-button type="primary" style="marginLeft:3px;" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createOperator"
        class="right"
        type="primary"
        @click="jump('create')"
      >新建运营账号</el-button>
    </div>
    <el-table ref="table" :data="tableData" :height="this.$getTableHeight" border stripe>
      <el-table-column label="会员昵称">
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ? scope.row.nickName :'&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fullName" label="真实姓名" />
      <el-table-column prop="type" label="账户类型">
        <template
          slot-scope="scope"
        >{{ scope.row.type=== 0 ? '投资人' :scope.row.type=== 1 ? "投资顾问" :scope.row.type=== 2 ? '公司账户' : scope.row.type=== 3 ?'运营账户' :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.deleteOperator"
              class="_delete"
              @click="deleter(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新增运营账户' : '编辑运营账户'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from '~/components/commom/pagination';
import createAdver from '~/components/Operating/create';
import detail from '~/components/Operating/detail';
import mmUrl from '~/utils/utilUrl';
import initData from '~/utils/initData';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  changeTableHeight,
  _searchInfo,
  reduceArr,
  createDics
} from '~/utils/util';
export default {
  components: {
    Pagination,
    detail,
    createAdver
  },
  data() {
    return initData.Operating
  },
  mounted() {
    // window.addEventListener("click", e => {
    //   this.active = false;
    // });
    this.initGetData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMation('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    getLevel(res) {
      let result = '';
      this.levels.forEach(v => {
        if (v.levelCode === res) {
          result = v.levelNmae
        }
      })
      return result
    },
    jump(id) {
      this.dialogVisible = true
      this.jumpId = id
      id === 'create' ? (this.isCreate = true) : (this.isCreate = false)
    },
    getGrouping(res) {
      let result = '';
      this.memberLevel.forEach(v => {
        if (v.dicCode === res) {
          result = v.dicName
        }
      })
      return result
    },
    deleter(row) {
      const that = this
      _deleteMethods(mmUrl.member.delete, row, that).then(() => {
        that.searchInfoMation('no')
      })
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.member.get, res, that)
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.searchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.searchInfo)
      this.changeTableData(result)
    },
    initGetData(res) {
      const data = {
        grouping: '',
        keyword: '',
        level: '',
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 20,
          skipCount: 0
        }
      }
      Object.assign(data, this.copySearInfo)
      this.$post({
        url: mmUrl.member.pageLoad,
        data: data
      }).then(res => {
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        this.loading = false
        this.levels = res.levels
        this.memberLevel = res.dicsMap.MEMBER_LEVEL.children
        changeTableHeight(this)
      })
    }
  }
}
</script>

<style lang='scss' module>
.top_search {
  margin-bottom: 12px;
}
</style>
